<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>商品搜索frm</title>
  	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        /*横向商品列表*/
        .goodsListbox{width: 100%;height: auto;padding:0.2rem 0.26rem;box-sizing: border-box;}
        .goodsListItem{width: 100%;background: #fff;margin-bottom: 0.2rem;height:3.86rem;box-sizing: border-box;
          padding: 0.26rem;border-radius: 0.3rem;display: flex;flex-wrap: nowrap;justify-content: flex-start;}
        .goodsListItemleft{width:3.33rem;height: 3.33rem;margin-right: 0.1rem;position: relative;}
        .goodsListItemleft img:nth-child(1){width:3.33rem;height: 3.33rem;border-radius: 0.1rem;min-width: 3.33rem;}
        .iconbiaoqian{position: absolute;width:1.44rem;height:0.68rem;top:0.1rem;left:-0.12rem;}
        .goodsListItemright{width: 100%;padding:0.13rem 0.1rem;box-sizing: border-box;position: relative;}
        .goodsListItemright .goodsTitle{line-height: 0.48rem;font-size: 0.4rem;overflow: hidden;text-overflow: ellipsis;
          display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;padding: 0px;margin: 0px;height: 0.96rem;}
        .goodsTitleIcon{width: 0.4rem;;height:0.4rem;vertical-align: middle;display: inline-block;margin-bottom:0.05rem;}
        .goodsListItemright .shopName{font-size:0.3rem;padding: 0.12rem 0;width: 100%;
          overflow: hidden;text-overflow: ellipsis;
            display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;}
        .goodsListItemright .discountbox{font-size:0.3rem;color: #fff;margin:0.12rem 0;display: flex;flex-wrap: nowrap;}
        .goodsListItemright .discountbox span:nth-child(1){height: 0.48rem;padding:0 0.25rem;
          background-image: url(../../image/goods/quanbg.png);border-radius:0.1rem;display: flex;align-items: center;
          margin-right: 0.15rem;background-size: 100% 100%;color: #fff;}
        .goodsListItemright .discountbox span:nth-child(2){height: 0.48rem;color:#ff4d3A;border-radius:0.1rem;padding:0 0.25rem;
          display: flex;align-items: center;background:#ffe4e4;border:0.5px solid #ff4d3A;
          padding: 0 0.1rem;box-sizing: border-box;}
        .goodsMsg{display: flex;flex-wrap: nowrap;justify-content: space-between;padding: 0.1rem 0;align-items:flex-end;}
        .goodsPrice{color:#ff0000;font-size:0.32rem;}
        .goodsPrice	span{color: #ff0000;font-size:0.51rem}
        .volumeNum{color: #999;font-size:0.32rem;padding-bottom: 0.1rem;}
        .box2 .Moneyicon{font-size: 0.27rem;color: rgb(255,52,0);}
        .box2 .quan{color: #fff;margin-right: 0.1rem;font-size:0.26rem;border-radius:0.1rem;
    	    padding:0.05rem 0.2rem;background-image: url(../../image/specialPage/quan.png);
    	    height:0.45rem;background-size:100% 100%;text-align: center;}
        .box2 .butie{background: rgb(255,228,228);font-size:0.26rem;color: rgb(255,52,0);border-radius:0.1rem;
      	  border: 1px solid rgb(255,77,58);padding:0.05rem 0.15rem;height:0.45rem;}
        .box2 .oldmoney{background:rgb(255,228,228);font-size:0.32rem;color: rgb(255,52,0);border-radius:0.1rem;
      	  padding: 0.05rem 0.12rem;position: relative;top:-0.15rem}
        .box2 .goodsprice{height:2.1rem;display: flex;flex-wrap: nowrap;justify-content:space-between;align-items:flex-end;}
        .box2 .priceNum{color: rgb(255,52,0);font-size:0.51rem;margin-bottom: 0.1rem}
        .box2 .shopBtn{width:2rem;height:0.7rem;display: flex;align-items: center;justify-content: center;background:#efefef;border-radius: 0.4rem;
    			color: #999999;margin-bottom: 0.05rem;}
    		.box2 .shopBtn1{width:1.8rem;height:0.6rem;display: flex;align-items: center;justify-content: center;background:#ff4c41;border-radius: 0.3rem;
    			color: #fff;margin-bottom: 0.05rem;}
        .noneGoods{display: none;padding-top: 2rem;}
        .noneGoods img{width: 40%;margin: 0 auto;}
        .noneGoods p{width: 100%;color: #999;align-items: center;padding-top: 0.2rem;text-align: center;}
    </style>
</head>
<body id="wrap">
    <div class="goodsListbox" id="app" v-cloak>
        <div class="goodsListItem" v-for="item in good_listData"  @click="openGoodsDeatilFun(item)">
            <div class="goodsListItemleft">
                <img :src='item.pict_url' alt="">
                <img class="iconbiaoqian" v-if="item.type == 2" src="../../image/specialPage/biaoqian.png" alt=""/>
            </div>
            <div v-if="item.is_finish != 1" class="goodsListItemright">
                <div class="goodsTitle">
                    <img class="goodsTitleIcon" v-if="item.user_type == 0" src="../../image/goods/bill_icon_taobao.png" alt=""/>
                    <img class="goodsTitleIcon" v-if="item.user_type == 1" src="../../image/goods/bill_icon_tmall.png" alt=""/>
                    <img class="goodsTitleIcon" v-if="item.user_type == 2" src="../../image/goods/pd.png" alt=""/>
                    <img class="goodsTitleIcon" v-if="item.user_type == 3" src="../../image/goods/jd.png" alt=""/>
                    {{item.short_title != '' ? item.short_title :  item.title}}
                </div>
                <p class="shopName">{{item.shop_title}}</p>
                <div class="discountbox">
                    <span>券{{item.coupon_amount}}元</span>
                    <span>补贴{{item.per_price}}元</span>
                </div>
                <div class="goodsMsg">
                    <span class="goodsPrice">到手价￥<span>{{item.end_price}}</span></span>
                    <span class="volumeNum">已抢{{item.volume}}件</span>
                </div>
            </div>
            <div v-if="item.is_finish == 1" class="goodsListItemright box2">
                <p class="goodsTitle">{{item.short_title != '' ? item.short_title :  item.title}}</p>
                <div class="goodsprice">
                    <div class="priceMsg">
                        <p><span class="oldmoney">原价￥{{item.zk_final_price}}</span></p>
                        <p class="priceNum"><span class="Moneyicon">到手价￥</span>{{item.end_price}}</p>
                        <p style="color: rgb(153,153,153);font-size: 0.32rem;">{{item.volume}}人已抢购</p>
                    </div>
                    <div  :class="item.status == 1? 'shopBtn1':'shopBtn'">已抢光</div>
                </div>
            </div>
        </div>
        <div class="noneGoods" tapmode onclick="getGoodsListData()">
            <img src="../../image/noGoods.png" alt="">
            <p class="sg-text-size32">暂无商品</p>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app;
var search_history = []; //历史搜索列表数据
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    //初始化数据
    initializeData();
    //关键字搜索
    api.addEventListener({
        name: 'sortDataWordFun'
    }, function(ret, err){
        if( ret ){
            app.next_p = 1;
            app.next_id = 1;
            app.keyWords = ret.value.key;
            app.sort = 0;
            app.has_coupon = 1;
            app.isLast =  0;
            app.good_listData = [];
            getGoodsListData();
        }else{
             alert( JSON.stringify( err ) );
        }
    });
    // 筛选修改
    api.addEventListener({
        name: 'sortDataFun'
    }, function(ret, err){
        if( ret ){
            app.next_p = 1;
            app.next_id = 1;
            app.sort = ret.value.Sort;
            app.has_coupon = ret.value.quanSort;
            app.pf = ret.value.pf;
            app.good_listData = [];
            // 下拉刷新页面数据重置页码数据
            api.refreshHeaderLoading();
            getGoodsListData();
        }else{
             alert( JSON.stringify( err ) );
        }
    });
    // 下拉刷新页面数据重置页码数据
		api.setRefreshHeaderInfo({
				loadingImg: 'widget://image/refresh.png',
				bgColor: '#fff',
				showTime: "false"
		}, function (ret, err) {
				if (ret) {
						app.next_p = 1;
						app.next_id = 1;
						getGoodsListData();
				} else {
						api.refreshHeaderLoadDone();
				}
		});
    //上拉加载新一页数据 - 第三步（可选）
    if (app.whetherToLoading == false) {
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 1000 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err) {
            if (!app.isLast) {
                app.whetherToLoading = true;
                app.next_p ++;
                getGoodsListData();
            }else{
                api.toast({
                    msg: '已经到底了',
                    duration: 2000,
                    location: 'middle'
                });
            }
        });
    }
    // 获取热门搜索数据
    getGoodsListData();
}

// 初始化数据
function initializeData(){
    app = new Vue({
        el: '#app',
        data: {
            whetherToLoading : false,//上拉加载状态 加载中上拉无效
            keyWords : api.pageParam.keyWords,//当前搜索商品的关键字
            next_p : 1,//获取当前页的数据
            next_id : 1,//未知
            has_coupon : 1,//1有
            pf:api.pageParam.pf || api.pageParam.platformType,
            sort: 0, //筛选排序方式 0不排序， 1销量降序 -1销量升序 2价格降序 -2价格升序
            isLast: 0, //是否到底1为到底 0为未到底
            good_listData:[],//搜索商品数据对象
        }
    });
}
// 获取热门搜索数据
function getGoodsListData(){
    $api.ajax({
        url: 'api/goods/search',
        method: 'get',
        data: {
            values: {
                q: app.keyWords,
                next_p: app.next_p,
                pf:app.pf,
                next_id: app.next_id,
                sort: app.sort,
                has_coupon:app.has_coupon
            }
        },
    }, function (ret,err) {
        api.refreshHeaderLoadDone(); //移除下拉刷新状态
        app.whetherToLoading == false
        if(ret){
            // 第一页就没有商品的情况
            if(app.next_p == 1 && ret.data.list.length == 0){
              $api.css($api.dom('.noneGoods'),'display:block');
            }else{
              $api.css($api.dom('.noneGoods'),'display:none');
            }
            if (ret.data.next_id) { //后台让我加的多余的分页
                app.next_id = ret.data.next_id;
            }
            if(app.next_p == 1){
                app.good_listData = ret.data.list;
            }else {
                app.good_listData = app.good_listData.concat(ret.data.list)
            }
            if(ret.data.list.length == 0){//没有商品了到最后一页了
                app.isLast = 1;
            }
        }else {
            api.toast({
                msg: '网络错误,请稍后重试',
                duration: 1000,
                location: 'middle'
            });
        }
    });
}
// 关闭当前页面
function closeWinFun(){
    api.closeWin({});
}
</script>
</html>
